<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中英切换test</title>
    <!-- https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="/dep/jquery.i18n.min.js"></script>
  </head>

  <script>
    $(document).ready(function () {
      /*默认语言*/
      var defaultLang = "en";
      $("[i18n]").i18n({
        defaultLang: defaultLang,
        filePath: "/src/i18n/",
        filePrefix: "i18n_",
        fileSuffix: "",
        forever: true,
        callback: function () {
          console.log("i18n is ready.");
        },
      });
      /*切换为中文 - 按钮*/
      $("#chinese").click(function (e) {
        $("[i18n]").i18n({
          defaultLang: "cn",
          filePath: "/src/i18n/",
        });
        console.log($(e.target).attr("value"));
        var a = $("#chinese").val() == "cn" ? "en" : "cn";
        $("#chinese").val(a);
        console.log($("#chinese").val());
        console.log("click 中文 btn");
      });
      /*切换为英文 - 按钮*/
      $("#english").click(function () {
        $("[i18n]").i18n({
          defaultLang: "en",
          filePath: "/src/i18n/",
        });
        console.log(this.value);
        console.log("click En btn");
      });
    });
  </script>

  <body>
    <div>
      <button id="chinese" type="button" value="cn">中文</button>
      <button id="english" type="button" value="en">English</button>
      <h1 i18n="welcome-head">Welcome to My Little Shop</h1>
      <ul>
        <li>
          <a href="#" i18n="about">About</a>
        </li>
        <li>
          <a href="#">Our Menu</a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </body>
</html>
